<template>
	<div class="padding20" style="height: 1000px">
		<el-form ref="form" :model="form">
			<template v-for="(item, index) in form.configList">
				<el-form-item :label="item.name" :label-width="formLabelWidth" :key="item.id" :prop="`configList.${index}.tagValues`">
					<el-row :gutter="10">
						<el-col :span="20">
							<el-input
								v-if="item.valueType == '1'"
								v-model="item.tagValues"
								autocomplete="off"
								:placeholder="`请输入${item.name}`"
							></el-input>
							<template v-if="item.valueType == '5'">
								<fortress-upload :size="10" type="image" name="tagValues" :formData="item"></fortress-upload>
							</template>
						</el-col>
						<el-col :span="3">
							<el-button
								class="fortress-copy"
								type="primary"
								plain
								@click="copy($event)"
								:data-clipboard-text="`\$\{${item.tagName}\}`"
							>
								{{ "${" }}{{ item.tagName }}{{ "}" }}
							</el-button>
						</el-col>
					</el-row>
				</el-form-item>
			</template>
		</el-form>
		<div slot="footer" class="dialog-footer" v-if="visible">
			<el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
		</div>
	</div>
</template>

<script>
import Clipboard from "clipboard"
import { cmsconfigList, cmsconfigListEdit } from "@/api/cms/cmsconfig.js"
import { enumList } from "@/api/public.api.js"
// import * as ftVal from "@/common/fortressValidator.js"
export default {
	props: {
		tagGroup: [Number, String] || undefined,
	},
	data() {
		return {
			form: {
				configList: [
					{
						id: "",
						name: "",
						valueType: "",
						tagValues: "",
					},
				],
			},
			formLabelWidth: "120px",
			ConfigValueType_cmsList: [],
			TagGroup_cmsList: [],
			YesNoList: [],
			visible: false,
		}
	},
	created() {
		this.init()
	},
	mounted() {},
	methods: {
		copy() {
			this.$message({
				type: "success",
				message: "复制成功!",
			})
		},
		queryEnumList() {
			this.ConfigValueType_cmsList = []
			enumList("ConfigValueType", "cms").then(resp => {
				if (resp.code == 0) {
					this.ConfigValueType_cmsList = resp.data
				}
			})

			this.YesNoList = []
			enumList("YesNo", "").then(resp => {
				if (resp.code == 0) {
					this.YesNoList = resp.data
				}
			})
		},
		init() {
			let queryForm = {}
			if (this.tagGroup && this.tagGroup != "-1") {
				queryForm = { tagGroup: this.tagGroup }
			}
			cmsconfigList(queryForm).then(resp => {
				if (resp.code == 0) {
					this.$nextTick(() => {
						this.form.configList = resp.data
						this.visible = true
						this.$nextTick(() => {
							this.clipBoard = new Clipboard(".fortress-copy")
						})
					})
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		//提交表单数据
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					console.log(this.form)
					cmsconfigListEdit(this.form.configList).then(resp => {
						if (resp.code == 0) {
							this.$message({
								type: "success",
								message: "操作成功!",
							})
							this.$emit("refreshData")
						} else {
							this.$msg({
								message: resp.msg,
								type: "error",
							})
						}
					})
				} else {
					console.log("error submit!!")
					return false
				}
			})
		},
		resetForm() {
			this.form = {
				id: "",
				name: "",
				tagName: "",
				valueType: "",
				tagValues: "",
				updateUser: "",
				updateTime: "",
				tagGroup: "",
				sort: "",
				isText: "",
			}
			this.$nextTick(() => {
				if (this.$refs["form"]) {
					this.$refs["form"].resetFields()
				}
			})
		},
	},
}
</script>
<style lang="scss">
.date {
	.el-date-editor--daterange.el-input__inner {
		width: 230px !important;
	}
	.el-date-editor .el-range-separator {
		width: 24px !important;
	}
}
</style>
<style lang="scss" scoped></style>
